<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>陈爱莲</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>
<style>
 body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
      height:888px;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }






    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
      text-decoration: none;
    }
    .nav{
        width: 100%;
        height: 162px;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        font-size: 12px;
    }
    .nav li{
        width: 20%;
        height: 74px;
    }
    .nav li img{
        width: 40px;
    }
.nav li span{
    display:block;
    color:#666;
}



.open{
  width:100% ;
  height: 44px;
  background-color: #333;
  color:#fff;
  display: flex;

}
.open li{
display: flex;
justify-content: center;
align-items: center;

}

.open li:nth-child(1){
  width: 8%;
}
.open li:nth-child(1) img{
  width: 10px;
}
.open li:nth-child(2){
  width: 10%;
}
.open li:nth-child(2) img{
  width: 30px;

}
.open li:nth-child(3){
  width: 57%;
}
.open li:nth-child(4){
  width: 25%;
  background-color: #f63535;

} 

/* 搜索框 */
.sousuo-wrapper{
  width: 100%;
  height: 44px;
  background-color: #c82519;
  color:#fff;
  display: flex;
  align-items: center;
  top:0;
  position: sticky;
  z-index: 99;
}
.btn,.denglu{
  width:44px ;
  height: 44px;

}
.sousuo{
  flex: 1;
  height: 30px;
  background-color: #fff;
  border-radius: 15px;
}
.denglu{
  display: flex;
  align-items: center;
  justify-content: center;  
}
.btn span{
  margin: 14px 0 0 15px;
  width: 20px;
  height: 18px;
  display: block;
  background: url('./三杠1.png')no-repeat;
  background-size: 100% 100%;
}
.jd{
  width: 20px;
  height: 15px;
  background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
  background-size:200px;
  margin: 8px 8px 0 15px;
  position: relative;
  z-index: 1;
  float: left;


}
.fangdajing{
  width: 18px;
  height: 15px;
  background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
  background-position: -80px 0;
  background-size : 200px;
  margin: 8px 0 0 15px;
  position: relative;
  z-index:1;
  float: left;
}

.jd::after{
  content: '';
  display: block;
  width: 1px;
  height:15px;
  background-color: #dddddd;
  position: absolute;
  left: 30px;
}


.footer{
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  position: absolute;
  bottom: 0;

}
.footer li{
  flex:20%;

}
.footer li img{
  width: 66px;

}
</style>
<body>
  <!-- 立即打开 -->
  <ul class="open">
    <li> <img src="./02-1.png" alt=""></li>
    <li> <img src="./02-2.png" alt=""></li>
    <li>打开京东app,购物轻松又实惠</li>
    <li><span>立即打开</span></li>
   </ul>
  

  <!-- 搜索框 -->
  <div class="sousuo-wrapper">

    
    


    <div class="btn">
        <span></span>
    </div>

    <div class="sousuo">

        <div class="jd"></div>

        <div class="fangdajing"></div>


    </div>

    <div class="denglu">
        登录
    </div>


</div>
 
  
<!-- 轮播图1-->
<div>
    <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./a.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./b.jpg" alt=""> </div>
              <div class="swiper-slide"><img src="./c.jpg" alt=""> </div>
              <div class="swiper-slide"><img src="./d.jpg" alt=""> </div>
              <div class="swiper-slide"><img src="./e.jpg" alt=""> </div>
              <div class="swiper-slide"><img src="./f.jpg" alt=""> </div>
              <div class="swiper-slide"><img src="./j.jpg" alt=""> </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
</div>
 

<!-- 轮播图2-->
    <div>
            <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide"> <ul class="nav">
                            <li><a href="javascript:;"><img src="./1.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./2.png" alt=""><span>数码电器</span></a></li>
                            <li><a href="javascript:;"><img src="./3.png" alt=""><span>京东服饰</span></a></li>
                            <li><a href="javascript:;"><img src="./4.png" alt=""><span>京东生鲜</span></a></li>
                            <li><a href="javascript:;"><img src="./5.png" alt=""><span>京东到家</span></a></li>
                            <li><a href="javascript:;"><img src="./6.png" alt=""><span>充值缴费</span></a></li>
                            <li><a href="javascript:;"><img src="./7.png" alt=""><span>9.9元拼</span></a></li>
                            <li><a href="javascript:;"><img src="./8.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./9.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./10.png" alt=""><span>京东超市</span></a></li>
                        </ul></div>
                      <div class="swiper-slide"> <ul class="nav">
                            <li><a href="javascript:;"><img src="./1.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./2.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./3.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./4.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./5.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./6.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./7.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./8.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./9.png" alt=""><span>京东超市</span></a></li>
                            <li><a href="javascript:;"><img src="./10.png" alt=""><span>京东超市</span></a></li>
                        </ul></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
    </div>
   
    <ul class="footer">
      <li><a href ="javascript:;"><img src="./z.png" alt=""></a></li>
      <li><a href ="javascript:;"><img src="./x.png" alt=""></a></li>
      <li><a href ="javascript:;"><img src="./c.png" alt=""></a></li>
      <li><a href ="javascript:;"><img src="./v.png" alt=""></a></li>
      <li><a href ="javascript:;"><img src="./b.png" alt=""></a></li>
    </ul>


    <script src="./js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        },
      });
    </script>

</body>
</html>